<script setup lang="ts">
import avatar_url from '../../../../assets/default.png'
import { onMounted, watch } from 'vue'
import type { Chats } from '@/services/room/type'
const { chatList, account } = defineProps<{
  chatList: Chats
  account: string
}>()

/**
 * 将包含复杂 Unicode 表情编码的字符串转换为包含实际表情字符的字符串。
 * @param text 包含表情编码的原始字符串。
 * @returns 返回替换了表情编码为实际表情字符的字符串。
 */
function convertComplexCodesToEmojis(text: string): string {
  return text.replace(/\[([0-9a-fA-F-]+)\]/g, (_match, complexCode) => {
    // 将复合编码分割成单个编码，然后将每个编码转换为对应的 Unicode 字符
    const codesArray: string[] = complexCode.split('-')
    return codesArray
      .map(codePart => {
        // 需要确保代码是有效的十六进制字符串
        if (!codePart) return ''
        const codePoint = parseInt(codePart, 16)
        // 确保是有效的代码点
        if (!isNaN(codePoint)) {
          return String.fromCodePoint(codePoint)
        }
        return ''
      })
      .join('')
  })
}
// 一直保持滚动条到最底部
const scrollToBottom = () => {
  chatList.forEach(chat => {
    chat.content = convertComplexCodesToEmojis(chat.content)
  })
  // nextTick(() => {
  //   const commentContent = document.querySelector('.comment_content ul')
  //   if (commentContent) {
  //     commentContent.scrollTop = commentContent.scrollHeight
  //   }
  // })
}
onMounted(scrollToBottom)

watch(chatList, scrollToBottom, {
  deep: true
})
</script>
<template>
  <div class="comment_content">
    <ul>
      <li
        v-for="chat in chatList"
        :key="chat.id"
        :class="{ me: chat.account === account }"
      >
        <div v-if="chat.account !== account" class="avatar">
          <el-avatar :src="avatar_url"></el-avatar>
        </div>
        <div class="content">
          <div class="account">
            <span
              >{{ chat.account
              }}<span style="color: #409eff">
                ({{ chat.messageType === '1' ? '私聊' : '所有人' }})</span
              ></span
            >
          </div>
          <div class="msg">
            <img
              :src="chat.content"
              alt=""
              v-if="chat.content.includes('data:image')"
            />
            <span v-else>{{ chat.content }}</span>
          </div>
        </div>
        <div v-if="chat.account === account" class="avatar">
          <el-avatar :src="avatar_url"></el-avatar>
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="less">
.comment_content {
  height: 65%;
  margin: 5px 10px;
  ul {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    scroll-behavior: smooth; /* 平滑滚动 */
    li {
      display: flex;
      margin-top: 20px;
      .content {
        margin-left: 10px;
        .account {
          font-size: 14px;
        }
        .msg {
          font-size: 16px;
          margin-top: 5px;
          background-color: #ebedf2;
          border-radius: 10px;
          padding: 10px;
          img {
            width: 100%;
            height: 100%;
            background-size: cover;
          }
        }
      }
    }
    .me {
      justify-content: flex-end;
      .content {
        margin-right: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .msg {
          color: #fff;
          background-color: #409eff;
        }
      }
    }
  }
}
</style>
